<template>
	<view class="container">
		<u-tabs class="category"
			:list="categoryList" 
			name="categoryName" 
			:is-scroll="true" 
			:current="current" 
			@change="change"
			:bold="true"   
			font-size="30"
			bar-height="6" 
			bar-width="80" 
			active-color="#2979ff"
			inactive-color="#000000" 
		>
			
		</u-tabs>
		
		<view class="goods_list">
			<goods-list v-if="goods.length > 0" @goodsItemClick="goGoodsDetail" :goods="goods"></goods-list>
			
			<u-empty v-else text="暂无数据" mode="list"></u-empty>
		</view>
		
		<u-divider v-if="flag">到底啦</u-divider>
		
		<u-back-top :scroll-top="scrollTop" :icon-style="iconStyle"></u-back-top>
		
	</view>
</template>

<script>
	import goodsList from '@/components/goods-list/goods-list.vue'
	import {
		getGoodsList
	} from '@/api/goods.js'
	export default {
		components: {
			"goods-list": goodsList
		},
		data() {
			return {
				pageNum: 1,
				pageSize: 10,
				goods: [],        // 商品列表
				flag: false,      // 触底标识
				categoryList: [],
				current: 0,
				scrollTop: 0,     // 返回顶部
				iconStyle: {
					fontSize: '32rpx',
					color: '#007aff'
				}
			};
		},
		methods: {
			change(index) {
				this.current = index;
				this.pageNum = 1
				this.goods = []
				this.flag = false
				
				this.getGoodsList()
			},
			async getGoodsList() {
				let params = {}
				params.pageNum = this.pageNum;
				params.pageSize = this.pageSize;
				params.categoryId = this.categoryList[this.current].categoryId;

				await getGoodsList(params).then(res => {
					// 数据追加
					this.goods = [...this.goods, ...res.rows]
				})
			},
			// 导航到商品详情页
			goGoodsDetail(goodsId) {
				this.$u.route('/pages/goods-detail/goods-detail', {
					goodsId: goodsId
				});
			}
		},
		onLoad(options) {
			this.categoryList = JSON.parse(options.categoryList)
			this.current = options.index
			
			this.getGoodsList()
		},
		// 下滑触底
		onReachBottom() {
			if (this.goods.length < this.pageNum * 10) {
				return this.flag = true
			}
			this.pageNum++
			this.getGoodsList()
		},
		// 返回顶部
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		}
	}
</script>

<style lang="scss" scoped>
	@import "./goods.scss";
</style>
